<template>
	<view>
		<ad class="ad" unit-id="adunit-689833227e1fb0a0"></ad>
		<view class="store_view" v-for="(data,index) in storeList" :key="data.store_id">
			<view class="top_view">
				<image class="store_img" :src="data.avatar?data.avatar:'/static/default_image.png'" />
				<view class="store_info_view">
					<view class="store_name">{{data.name}}</view>
					<view class="store_addr">{{data.addr}}</view>
				</view>
				<!--
		    <view class="coupon_exchange" bindtap="couponExchange" data-storeid='{{data.store_id}}' data-index='{{index}}'> 礼票兑换 </view>
		    -->
			</view>
			<view class="line_view"></view>
			<view class="bottom_view">
				<view class="coins_view">
					<view class="coins_icon">
						<image src="/static/store_list_coins_icon.png" />
					</view>
					<text class="coins_num">{{data.money}}</text>
				</view>
			</view>
		</view>

		<view class="pageBottom" :hidden="pageBottom">已经到底啦</view>

		<!-- 		<view class="nullData" hidden="{{nulldata}}" style="height:{{wheight}}px">
		  <import src="../nulldata/nulldata.wxml" />
		  <template is="nulldata" data="{{...pagenulldata}}" />
		</view> -->
		<view class='login_btn' v-if="!userId">
			<image src='/static/login_btn_bg.png'></image>
			<text>点击登录</text>
			<button open-type="getUserInfo" bindgetuserinfo="onGotUserInfo"></button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				pageSize: 20,
				userId: null,
				nulldata: true,
				pageNullData: {},
				storeList: [],
				pageBottom: true
			};
		}
	}
</script>

<style lang="scss">
	page {
		background: #6B5546;
		width: 100%;
	}

	.ad {
		box-sizing: border-box;
		padding: 15px 15px 0;
	}

	.store_view {
		background: #FFFFFF;
		border-radius: 2px;
		width: 690rpx;
		height: 240rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}

	.top_view {
		height: 150rpx;
	}

	.store_img {
		width: 100rpx;
		height: 100rpx;
		margin: 20rpx;
		float: left;
	}

	.store_info_view {
		float: left;
		margin-top: 20rpx;
	}

	.store_name {
		font-size: 28rpx;
		color: #343434;
		max-width: 350rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.store_distance,
	.store_addr {
		font-size: 24rpx;
		color: #888888;
		margin-top: 8rpx;
		max-width: 350rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.coupon_exchange {
		float: right;
		width: 160rpx;
		height: 56rpx;
		margin-right: 24rpx;
		border-radius: 28rpx;
		background-color: #FFAE00;
		color: white;
		font-size: 24rpx;
		font-weight: bold;
		line-height: 56rpx;
		text-align: center;
		margin-top: 38rpx;
	}

	.line_view {
		height: 1rpx;
		border: none;
		border-top: 1px dashed #CFCFCF;
	}

	.bottom_view {
		height: 90rpx;
	}

	.coins_view {
		float: left;
		width: 340rpx;
		height: 90rpx;
	}

	.line2_view {
		float: left;
		background-color: #DFDFDF;
		width: 1rpx;
		height: 20rpx;
		margin-top: 34rpx;
	}

	.coupon_view {
		float: right;
		width: 340rpx;
		height: 90rpx;
	}

	.coins_icon,
	.coupon_icon {
		width: 40rpx;
		height: 40rpx;
		margin: 24rpx 10rpx 24rpx 68rpx;
		float: left;
	}

	.coins_icon>image,
	.coupon_icon>image {
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
	}

	.coins_num,
	.coupon_num {
		font-size: 36rpx;
		color: #FE7E14;
		margin-top: 20rpx;
		float: left;
		max-width: 150rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.pageBottom {
		font-size: 28rpx;
		color: #999;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		width: 750rpx;
		margin-top: 20rpx;
	}

	.nullData {
		background: #6B5546;
		color: white;
	}

	.login_btn {
		width: 240rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 4px;
		position: fixed;
		left: 50%;
		top: 50%;
		margin-top: -40rpx;
		margin-left: -120rpx;
	}

	.login_btn>image {
		position: absolute;
		top: 24rpx;
		left: 28rpx;
		width: 30rpx;
		height: 32rpx;
	}

	.login_btn>text {
		position: absolute;
		top: -10rpx;
		left: 74rpx;
		/* margin-left: 16rpx; */
		font-size: 16px;
		font-weight: bold;
		color: #FE7606;
		line-height: 100rpx;
	}

	.login_btn>button {
		position: absolute;
		top: 0;
		left: 0;
		width: 240rpx;
		height: 80rpx;
		opacity: 0;
	}
</style>